<template>
	<!-- mainView -->
	<view class="container">
		<view class="carItem" v-for="(item, index) in cartList" :key="item.id">
			<next-swipe-action :btnGroup="btnGroup" :index="index" @btnClick="deleteCartItem(index)">
				<view class="car-list" :cartList.price="cartList.price" :cartList.number="cartList.number">
					<!-- 复选框 -->
					<view class="left">
						<label>
							<checkbox :class="{ checked: item.checked }" :checked="item.checked"
								@click="toggleItemCheck(item, index)" />
						</label>
					</view>
					<!-- 商品图片 -->
					<view class="center">
						<img class="car-img" :src="item.image">
					</view>
					<!-- 商品列表 -->
					<view class="right">
						<view class="title">{{ item.title }}</view>
						<view class="attr">{{ item.attr_val }}</view>
						<view class="price">¥{{ item.price }}</view>
						<view class="functionBox">
							<view @click="addClick(index)" :index="index" @eventChange="numberChange" class="add">+
							</view>
							<view class="number">{{ item.number }}</view>
							<view @click="decrease(index)" :index="index" @eventChange="numberChange" class="delete">-
							</view>
						</view>
					</view>
				</view>
			</next-swipe-action>
		</view>
		<!-- 底部栏 -->
		<view class="bottom">
			<view class="checkboxs">
				<label>
					<checkbox :class="{}" :checked="allChecked" @click="toggleAllCheck()" />全选
				</label>
			</view>
			<view class="total-box">
				<text class="total-price">合计<text>¥{{ allPrice }}</text></text>
				<text class="coupon">
					<!-- 					共减<text>￥{{74.35}}</text>元 -->
					共<text>{{ total }}</text>件
				</text>
			</view>
			<view>
				<button class="toPay" @click="toOrders">去结算</button>
			</view>
		</view>
	</view>
</template>

<script>
import datas from "../../Json.js";
export default {
	data() {
		return {
			total: 0, //总数量
			allPrice: 0, //总价格
			testflag: true, // 标识
			allChecked: false, //全选状态  true|false
			cartList: [...datas.cartList],
			type: 'car',
			btnGroup: [{
				name: '删除',
				action: 'del',
				style: {
					bgColor: '#ff4d4f'
				}
			}]
		}
	},
	mounted() {
		// 给cartList数组添加checked属性
		this.cartList.forEach(item => (item.checked = false));
	},
	methods: {
		// 跳转创建订单
		toOrders() {
			const selectedItems = this.cartList.filter(item => item.checked);
			if (selectedItems.length) {
				uni.navigateTo({ url: `/pages/order/createOrder?type=${this.type}&data=${JSON.stringify(selectedItems)}` });
			} else {
				uni.showToast({ title: '请选择商品', icon: 'none' });
			}
		},
		// 全选状态更新
		updateAllCheckedStatus() {
			this.allChecked = this.cartList.every(item => item.checked);
		},
		// 全选按钮点击事件
		toggleAllCheck() {
			const newStatus = !this.allChecked; // 获取新的全选状态
			this.cartList.forEach(item => item.checked = newStatus);
			this.allChecked = newStatus; // 更新全选状态
		},
		// 单选按钮点击事件
		toggleItemCheck(item) {
			item.checked = !item.checked;
			this.updateAllCheckedStatus(); // 更新全选状态
		},
		// 删除按钮点击事件
		deleteCartItem(index) {
			this.cartList.splice(index, 1);
		},
		// 添加
		addClick(index) {
			if (this.cartList[index].checked) { // 确保商品被选中
				this.cartList[index].number++;
			} else {
				uni.showToast({ title: '未选中商品无法进行操作', icon: 'none' });
			}
		},
		//减少
		decrease(index) {
			if (this.cartList[index].checked) { // 确保商品被选中
				if (this.cartList[index].number > 1) {
					this.cartList[index].number--;
				}
			} else {
				uni.showToast({ title: '未选中商品无法进行操作', icon: 'none' });
			}
		}
	},
	onLoad() {

	},
	computed: {
		// 计算总数量
		total() {
			return this.cartList.reduce((sum, item) => sum + (item.checked ? item.number : 0), 0);
		},
		// 计算总价
		allPrice() {
			return this.cartList.reduce((sum, item) => sum + (item.checked ? item.number * item.price : 0), 0).toFixed(2);
		},
	}
}
</script>

<style lang='scss'>
.container {
	width: 100%;
	height: auto;
	min-height: 300px;
	padding-bottom: 60px;
}

.car-list {
	width: 95%;
	height: 100px;
	margin: 5px auto;
	border-radius: 10px;
	display: flex;
	flex-direction: row;
}

.left {
	width: 10%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

checkbox .wx-checkbox-input {
	border-radius: 50%;
	width: 15px;
	height: 15px;
	vertical-align: center;
}

.car-img {
	width: 90%;
	height: 90%;
	margin: 5%;
}

.center {
	width: 25%;
	height: auto;

}

.right {
	width: 65%;
	height: 100%;

	padding: 10px;
	box-sizing: border-box;
}

.title {
	font-size: 15px;
	/* font-weight: 600; */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.attr {
	font-size: 11px;
	/* font-weight: 600; */
	margin: 5px;
	color: #909399;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.price {
	color: #E63F32;
	float: left;
	width: 30%;
}

.functionBox {
	float: right;
	width: 70%;

}

.delete {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border: 1px solid #f5f5f5;
	float: right;
	background: #f5f5f5;
}

.number {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border: 1px solid #f5f5f5;
	float: right;
	background: #f5f5f5;
}

.add {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border: 1px solid #f5f5f5;
	float: right;
	background: #f5f5f5;
}


/* 底部栏 */
.bottom {
	margin-bottom: 30px;
	position: fixed;
	left: 10px;
	bottom: 10px;
	z-index: 1000;
	display: flex;
	align-items: center;
	width: 360px;
	height: 52px;
	padding: 0 10px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	border-radius: 8px;

	.checkboxs {
		font-size: 14px;
	}

	.total-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: right;
		padding-right: 20px;

		.total-price {
			font-size: 16px;
			color: #303133;

			text {
				text-align: right;
				font-weight: bold;
				color: #E63F32;
			}
		}

		.coupon {
			font-size: 13px;
			color: #909399;

			text {
				font-weight: bold;
				text-align: right;
				color: #E63F32;
			}
		}
	}

	.toPay {
		padding: 0 19px;
		margin: 0;
		border-radius: 100px;
		height: 39px;
		line-height: 39px;
		font-size: 15px;
		color: white;
		background: #fa436a;
		box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72);
	}
}
</style>